<div id="container">
  <img src="https://pbs.twimg.com/profile_images/459505368234606592/nuxaaQoo_400x400.jpeg" id="avatar" width="250" draggable="false"/>
  <div id="text">
    <h1>载入中…</h1>
    <p>(珠海旅游网)</p>
  </div>
</div>
<style>
	#container{
  top: 50%; left: 50%;
  margin-top: -200px; /*-1/2 of height*/
  margin-left: -125px; /*-1/2 of width*/
  position: fixed;
  text-align: center;
}

#avatar{
  border: white solid 7px;
  box-shadow: 0px 1px 0px rgba(0,0,0,0.25);
  border-radius: 50%;
  animation: bounce cubic-bezier(0.19,1.0,0.22,1.0) 1.5s alternate infinite;
  -webkit-animation: bounce cubic-bezier(0.19,1.0,0.22,1.0) 1.5s alternate infinite;
}

@keyframes bounce {
	to{
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0px 5px 10px rgba(0,0,0,0.15);
  }
}
@-webkit-keyframes bounce { /*maxthon duplicate*/
	to{
    -webkit-transform: translateY(-12px) scale(1.03);
    box-shadow: 0px 5px 10px rgba(0,0,0,0.15);
  }
}


#text{
  margin-top: 7px;
}

h1, p{
  margin: 0;
  padding: 0;
  
  font-family: Segoe UI, sans-serif;
  font-weight: 100;
  font-style: normal;
  color: rgba(0,0,0,1);
}

h1{
  color: rgba(1,106,154,0.75); /*#016A9A;*/
  text-shadow: 0px 1px 0px rgba(255,255,255,1.0);
}

p{
  color: rgba(0,0,0,0.25);
  text-shadow: 0px 1px 0px rgba(255,255,255,0.75);
}
</style>